<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四则运算</title>
    <script>
        window.onload =function(){
            var element =document.getElementsByTagName("input");
            console.log(element);

            element[3].onclick =function(){
                var a = element[0].value;//文本框中获取的value值的数据类型默认是字符串
                //console.log(a+"数据类型是" + typeof(a)); 查看a是什么数据类型的
                var b = element[1].value; 
                element[2].value=Number(a) +Number(b) ; //也可以用 parseFloat 改成数值型 
            }
            element[4].onclick =function(){
                var a = element[0].value;
                var b = element[1].value;
                element[2].value=a - b; 
            }
            element[5].onclick =function(){
                var a = element[0].value;
                var b = element[1].value;
                element[2].value=a * b; 
            }
            element[6].onclick =function(){
                var a = element[0].value;
                var b = element[1].value;
                element[2].value=a / b; 
            }
        }
    </script>
</head>
<body>
    <h2>四则运算</h2>
<form action="">
<label for="radius">数值1</label><input type="text" name="" id="first" placeholder="请输入第一个数"><br>
<label for="zhouchang">数值2</label><input type="text" name="" id="second" placeholder="请输入第二个数" ><br>
<label for="mianji">结果</label><input type="text" name="" id="结果" ><br>
<input type="button" value="加">
<input type="button" value="减">
<input type="button" value="乘">
<input type="button" value="除">
<input type="reset" value="重置">
</form>
</body>
</html>